import React, { useMemo } from 'react'
import { Tooltip } from 'antd'
import classnames from 'classnames'
import type { TooltipProps } from 'antd/es/tooltip'
import './index.less'

const AppTooltip: React.FC<TooltipProps & {
    theme?: ThemeType
}> = ({ overlay, title, children, placement, overlayClassName, theme, ...props }) => {
    // Component State
    // Component Event
    const resNames = useMemo(() => {
        const names = classnames({
            'app-tooltip': true,
            [`app-tooltip-${theme}`]: !!theme,
        }, overlayClassName)
        return names
    }, [theme])
    // Component Effect
    return (
        <Tooltip overlay={overlay} overlayClassName={resNames} title={title} placement={placement} {...props}>
            {children}
        </Tooltip>
    )
}

export default AppTooltip
